<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人资料</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form  model-form layui-row">
                <div class="layui-col-md3 layui-col-xs12 user_right">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img layui-circle userFaceBtn userAvatar" id="userFace"
                             th:src="${user.sysUserInfomationVO.headImg!=null?user.sysUserInfomationVO.headImg:'../../../static/images/head.png'}"
                             alt="">
                    </div>
                    <input name="headImg" id="headImg" type="hidden">
                    <input name="sysUserId" id="sysUserId" th:value="${user.id}" type="hidden">
                    <input name="sysUserInfomationId" id="sysUserInfomationId" th:value="${user.sysUserInfomationVO.id}"
                           type="hidden">
                    <button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i
                            class="layui-icon">&#xe67c;</i> 掐指一算，我要换一个头像了
                    </button>
                </div>
                <div class="layui-col-md6 layui-col-xs12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">登录账号</label>
                        <div class="layui-input-block">
                            <input th:value="${user.username}" type="text" disabled=""
                                   class="layui-input layui-disabled">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色</label>
                        <div class="layui-input-block">
                            <input th:value="${user.sysRoleVO.roleName}" type="text" disabled=""
                                   class="layui-input layui-disabled">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">姓名</label>
                        <div class="layui-input-block">
                            <input name="realname" type="text" th:value="${user.sysUserInfomationVO.realname}"
                                   placeholder="请输入真实姓名" lay-verify="required"
                                   class="layui-input person_name layui-form-danger">
                        </div>
                    </div>
                    <!--<div class="layui-form-item" pane="">
                        <label class="layui-form-label required">性别</label>
                        <div class="layui-input-block userSex">
                            <input class="sex" type="radio" name="sex" value="1" title="男"  checked="">
                            <input class="sex" type="radio" name="sex" value="0" title="女" >
                        </div>
                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label required">联系电话</label>
                        <div class="layui-input-block">
                            <input name="phone" type="tel" th:value="${user.sysUserInfomationVO.phone}"
                                   placeholder="请输入联系电话" lay-verify="required|isTelephone"
                                   class="layui-input phone">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">联系邮箱</label>
                        <div class="layui-input-block">
                            <input name="email" type="text" th:value="${user.sysUserInfomationVO.email}"
                                   placeholder="请输入联系邮箱" lay-verify="required|isEmail"
                                   class="layui-input mail">
                        </div>
                    </div>
                    <!--<div class="layui-form-item">
                        <label class="layui-form-label required">联系地址</label>
                        <div class="layui-input-block">
                            <input type="text"  placeholder="请输入联系地址" lay-verify="required"
                                class="layui-input addr">
                        </div>
                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">个性签名</label>
                        <div class="layui-input-block">
                            <textarea name="personalSignature" th:text="${user.sysUserInfomationVO.personalSignature}"
                                      placeholder="请输入内容" class="layui-textarea remark" maxlength="200"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../../../static/libs/layui/layui.js"></script>
<script src="../../../static/js/common.js"></script>
<script>
    layui.use(["form", "layer", "upload"], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;
        //上传头像
        upload.render({
            elem: '.userFaceBtn',
            url: '/imgUpload/imgload',
            method: "get",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
            done: function (res, index, upload) {
                $('#userFace').attr('src', res.data.urlLoad);
                $('#headImg').val(res.data.urlLoad);
                /* var num = parseInt(4*Math.random());  //生成0-4的随机数，随机显示一个头像信息
                 $('#userFace').attr('src',res.data[num].src);
                 window.sessionStorage.setItem('userFace',res.data[num].src);*/
            }
        });
        //添加验证规则
        form.verify({
            isTelephone: function (value, item) {
                if (!/^(0\d{2,3}[-]?\d{7,8}|0\d{2,3}\s?\d{7,8}|1[3456789]\d{9})$/.test(value)) {
                    return "联系电话格式不正确！";
                }
            },
            isEmail: function (value, item) {
                if (!/^([\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?)$/.test(value)) {
                    return "联系邮箱格式不正确！";
                }
            }
        });
        //提交个人资料
        form.on("submit(changeUser)", function (data) {
            var index = layer.msg('提交中，请稍候', {icon: 16, time: false, shade: 0.1});
            console.log(data.field)
            //将填写的用户信息存到session以便下次调取
            var key, userInfoHtml = '';
            userInfoHtml = {
                'person_name': $(".person_name").val(),
                'sex': $(".sex:checked").val(),
                'phone': $(".phone").val(),
                'mail': $(".mail").val(),
                'addr': $(".addr").val(),
                'remark': $(".remark").val()
            };
            for (key in data.field) {
                if (key.indexOf("like") != -1) {
                    userInfoHtml[key] = "on";
                }
            }
            window.sessionStorage.setItem("userInfo", JSON.stringify(userInfoHtml));

            var url = '/sysUserController/updateUser';
            $.post(url, data.field, function (res) {
                layer.closeAll('loading');
                if (res.success == true) {
                    layer.close(index);
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json').fail(function (res, status, xhr) {
                //todo:异常处理
                layer.closeAll('loading');
                layer.msg(res.responseJSON.message);
            });
            setTimeout(function () {
                layer.close(index);
              //  layer.msg("提交成功！");
            }, 2000);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //判断是否设置过头像，如果设置过则修改顶部、左侧和个人资料中的头像，否则使用默认头像
        window.onload = function (ev) {
            if ($("#userFace").attr("src") != "") {
                window.sessionStorage.setItem('userFace', $("#userFace").attr("src"));
            } else {
                $("#userFace").attr("src", "../../static/images/head.png");
            }
        }
        //判断是否修改过用户信息，如果修改过则填充修改后的信息
        var menuText = $("#top_tabs", parent.document).text();  //判断打开的窗口是否存在“个人资料”页面
        if (window.sessionStorage.getItem('userInfo')) {
            var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));
            $(".person_name").val(userInfo.person_name); //用户名
            $(".sex input[value=" + userInfo.sex + "]").attr("checked", "checked"); //性别
            $(".phone").val(userInfo.phone); //联系电话
            $(".mail").val(userInfo.mail); //联系邮箱
            $(".addr").val(userInfo.addr); //联系地址
            $(".remark").val(userInfo.remark); //备注
            form.render();
        }
    })
</script>
</body>
</html>